<template>
  <div class="showdata">
    <img :src="img" class="pic" alt=""><span class="percent">-{{per.value}}%</span>
    <div class="ip">{{per.name}}</div>
  </div>
</template>

<script>
export default {
    props:{
        per:{
            type:Object,
            default:function(){
                return{value:"",name:""}
            }
        }
    },
    computed: {
       // eslint-disable-next-line vue/return-in-computed-property
       img() {
            if (this.per.value <= 25) {
                return require("../assets/icons/memory_blue.png")
            }else if(this.per.value > 25&&this.per.value <= 50){
                return require("../assets/icons/memory_yellow.png")
            }else if(this.per.value > 50&&this.per.value <= 75){
                return require("../assets/icons/memory_orange.png")
            }else if(this.per.value > 75){
                return require("../assets/icons/memory_red.png")
            }
        }
    }

}
</script>

<style lang="less" scoped>
@import url("../base.css");
.showdata {
    position: relative;
    .pic{
        margin: 0 auto;
        width: 34px;//
        height: 60px;//
    }
    .percent {
        color: #07daf9;
        font-size: 16px;
        position: absolute;
        top:10px;
    }
}

</style>